<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { ElMessage } from 'element-plus'

/* 接收父组件传入的 lng / lat（可为空） */
const props = defineProps({
    lng: Number,   // 已选经度
    lat: Number    // 已选纬度
})


const locateByAMap = (AMap) => {
    AMap.plugin('AMap.Geolocation', () => {
        const geo = new AMap.Geolocation({
            enableHighAccuracy: true,
            timeout: 10000,
            convert: true,           // WGS84 → GCJ02（高德经纬）
            showCircle: false,       // 不要精度圆
            showMarker: false        // 不插默认图标
        })
        geo.getCurrentPosition((status, result) => {
            if (status === 'complete') {
                const { lng, lat } = result.position
                map.setCenter([lng, lat])
                map.setZoom(16)        // 近一点

            } else {
                ElMessage.error('定位失败')
                // 此处可选择弹 toast 或保持 fallbackCenter
            }
        })
    })
}


// 向父组件派发事件
const emit = defineEmits(['location-selected'])

const mapEl = ref(null)     // `<div>`节点
let map = null              // 地图实例
let marker = null           // 当前唯一标记

onMounted(async () => {
    /* 加载 JSAPI，创建地图 */
    const AMap = await AMapLoader.load({
        key: '6a15e02eb10d0e069c5e701681273282',
        version: '2.0'
    })

    /* ② 如果父组件传来了坐标，就以它为中心；否则用默认中心 */
    const hasInitial = props.lng != null && props.lat != null
    const fallbackCenter = [103.993033, 30.552469]
    const initialCenter = hasInitial
        ? [props.lng, props.lat]
        : fallbackCenter


    map = new AMap.Map(mapEl.value, {
        viewMode: '2D',
        zoom: 14,
        center: initialCenter,
    })

    /* ④ 如果有初始坐标 → 先画一个标记 */
    if (hasInitial) {
        marker = new AMap.Marker({
            position: initialCenter,
            anchor: 'bottom-center',
            map
        })
        marker.on('click', () => {
            map.remove(marker)
            marker = null
        })
    } else {
        locateByAMap(AMap)
    }

    /* ③ 监听地图点击：新增 / 移动标记，并把坐标回传给父组件 */
    map.on('click', (e) => {
        const { lng, lat } = e.lnglat
        if (!marker) {
            marker = new AMap.Marker({ position: e.lnglat, anchor: 'bottom-center', map })
            marker.on('click', () => { map.remove(marker); marker = null }) // 再次点击删除
        } else {
            marker.setPosition(e.lnglat)
        }
        emit('location-selected', lng, lat)      // 把坐标抛给父组件
    })
})

onUnmounted(() => {
    if (marker) map.remove(marker)
    map?.destroy()
    map = marker = null
})
</script>

<template>
    <!-- ④ 容器必须有宽高 -->
    <div ref="mapEl" style="width: 100%; height: 100%"></div>
</template>
